<script setup>
	import {
		onMounted,
		ref,
		watchEffect
	} from "vue";
	import {
		useCubeStore
	} from "@/stores/cube";
	import {
		getReverseName,
		CubeMap,
		mergeMove
	} from "@/utils/common.js";
	import {
		onUnmounted
	} from "vue";
	const props = defineProps(['formula']);
	let watchHandler = null;
	const emit = defineEmits([
		"onStopScramble",
		"onStartScramble",
		"onDoneScramble",
		"onErrorCountMax",
		"onFirstMove",
	]);
	const cubeStore = useCubeStore();
	const scramble = ref([]);
	const errorCount = ref(0);
	const display = ref([]);
	const currentStep = ref(0);
	const isInit = ref(false);
	const isDone = ref(false);
	const isDouble = ref(false);
	const doubleCount = ref(0);
	const doubleFirstName = ref("");

	let startMoveStepNum = cubeStore.currentStepNum;

	function displayContent() {
		if (isDouble.value && doubleCount.value < 2) {
			return;
		}
		if (!scramble.value.length) {
			display.value = [];
			return;
		}
		display.value = scramble.value.slice(currentStep.value, currentStep.value + 6);
		const current = scramble.value[currentStep.value];
		doubleCount.value = 0;
		doubleFirstName.value = "";
		isDouble.value = current.endsWith("2");
	}

	function handleMove(name, actualName, move) {
		if (name === actualName) {
			// currentStep.value++;
			scramble.value.shift();
			errorCount.value = 0;
			doubleCount.value = 0;
			doubleFirstName.value = "";
			isDouble.value = false;
		} else if (isDouble.value) {
			if (doubleCount.value === 0) {
				if (actualName.replace("'", "") === name.replace("'", "") + "2") {
					doubleFirstName.value = name;
					doubleCount.value++;
					isDouble.value = true;
				} else {
					errorCount.value++;
					doubleFirstName.value = '';
					doubleCount.value = 0;
					isDouble.value = false;
					let rname = getReverseName(move);
					scramble.value.splice(currentStep.value, 0, rname);
				}
			} else if (doubleCount.value === 1) {
				if (doubleFirstName.value == name) {
					doubleCount.value = 0;
					isDouble.value = false;
					// currentStep.value++
					errorCount.value = 0;
					scramble.value.shift();
				} else {
					let rname = getReverseName(move);
					if (rname == doubleFirstName.value) {
						doubleCount.value = 0;
						errorCount.value = 0;
					} else {
						let r = scramble.value.splice(currentStep.value, 1, rname, doubleFirstName.value);
						isDouble.value = false;
						doubleCount.value = 0;
						doubleFirstName.value = "";
					}
				}
			}
		} else {
			errorCount.value++;
			name = getReverseName(move);
			scramble.value.splice(currentStep.value, 0, name);
			isDouble.value = false;
			doubleCount.value = 0;
		}
		let ss = mergeMove(scramble.value, true);
		if (ss.trim() == '') {
			scramble.value = [];
		} else {
			scramble.value = mergeMove(scramble.value, true).split(" ");
		}
	}

	function handleDone() {
		if (!scramble.value.length) {
			isDone.value = true;
		}
		if (isDone.value) {
			emit("onDoneScramble");
		}
	}

	function handleError() {
		if (errorCount.value >= 6) {
			emit("onErrorCountMax");
		}
	}

	function handleDisplay() {
		displayContent();
		handleDone();
		handleError();
	}
	const itemClass = (idx) => {
		if (idx === 0) {
			return "formula selected";
		}
		return "formula unselected";
	};
	const doubleStyle = (idx) => {
		if (idx != 0)
			return;
		if (isDouble.value && doubleCount.value == 1) {
			return "background: linear-gradient(to right, #02B613 50%, rgb(43, 119, 255) 50%)";
		} else {
			return "background-color: rgb(43, 119, 255);color:#fff";
		}
	};
	onMounted(() => {
		scramble.value = props.formula.split(" ");
		displayContent();
		emit("onStartScramble");
	});
	watchHandler = watchEffect(() => {
		const move = cubeStore.currentMove;
		if (isInit.value && move && move.move) {
			if (startMoveStepNum === -1) {
				startMoveStepNum = cubeStore.currentStepNum;
				emit("onFirstMove", startMoveStepNum);
			}
			const name = move.move;
			const actualName = scramble.value[currentStep.value];
			handleMove(name, actualName, move.move);
			handleDisplay();
		} else {
			isInit.value = true;
		}
	});
	onUnmounted(() => {
		if (watchHandler != null) {
			watchHandler();
		}
	});
</script>

<template>
	<div>
		<div class="formulas" v-if="display.length">
			<div v-if="currentStep > 100" class="secret unselected">*</div>
			<div :class="itemClass(idx)" :style="doubleStyle(idx)" v-for="(item, idx) in display" :key="idx">
				<div v-if="idx === 0 && isDouble">
					<span class="doubleLeft" v-if="doubleCount >= 0"></span>
					<span class="doubleRight" v-if="doubleCount > 1"></span>
					{{ item }}
				</div>
				<span v-else>{{ item }}</span>
			</div>
			<div v-if="currentStep < scramble.length - 1" class="secret unselected">*</div>
		</div>
	</div>
</template>

<style scoped>
	.formulas {
		width: 100vw;
		height: 60px;
		display: flex;
		backdrop-filter: blur(6px);
		align-items: center;
		overflow: hidden;
		border-radius: 12px;
		margin: 0;
		padding: 0px;
		color: #4a576a;
		line-height: 36px;
	}

	.secret {
		white-space: nowrap;
		font-size: 24px;
		height: 17px;
		width: 17px;
		flex-shrink: 1;
		align-items: center;
		justify-content: center;
		min-width: 24px;
		min-height: 24px;
		text-align: center;
	}

	.formula {
		white-space: nowrap;
		font-size: 24px;
		height: 34px;
		width: 34px;
		flex-shrink: 1;
		align-items: center;
		justify-content: center;
		min-width: 24px;
		min-height: 24px;
		text-align: center;
	}

	.selected {
		border-radius: 100%;
		padding: 4px;
		line-height: 36px;
	}

	.unselected {
		border-radius: 90%;
		padding: 4px;
	}
</style>